import React, {Component, Fragment} from 'react';
import { Row, Col, Divider, Button} from 'antd';
import '../style/index.scss'
import { Link } from 'react-router-dom';

class AboutCom extends Component {
    constructor(props){
        super(props)
        this.state= {
            title:"ABOUT ME",
            divider:"关 于 · 我",
            dec:"设计界面，准备工具，学习语言，创建应用，搭建服务。我们给您提供了一套不断更新的知识框架。实践你的想法，做出想要的网站或应用。",
            btnName:"我的简历",
            techs:[
                {
                    tit:"会设计",
                    ico:"fa-edit"
                },
                {
                    tit:"做前端",
                    ico:"fa-html5"
                },
                {
                    tit:"懂后端",
                    ico:"fa-laptop"
                },
                {
                    tit:"用运维",
                    ico:"fa-hdd-o"
                }
            ]
        }
    }

    render(){
        return (
            <Fragment>
                <Row type={'flex'} justify={'center'}>
                    <Col xs={{span:24}} md={{span:16}}>
                        {/* <Row>&nbsp;</Row> */}
                        <Row>
                            <h1 className="tit_about">{this.state.title}</h1>
                        </Row>
                        <Row>
                            <Divider style={{fontSize: 30, fontWeight:"lighter"}}>{this.state.divider}</Divider>
                        </Row>
                        <Row>
                            <h4 className="tit_dec">{this.state.dec}</h4>
                        </Row>
                        <Row gutter={16}>
                            {
                                this.state.techs.map((item, index)=>{
                                    return (
                                        <Col xs={{span:12}} md={{span:6}} key={index} onClick={this.setRotateY}>
                                            <div className="wk_item animated bounceIn">
                                                <span>
                                                    <span className="cir_n">
                                                        <i className={`fa ${item.ico} fa-3x`}></i>
                                                    </span>
                                                    </span><br/>{item.tit}
                                            </div>
                                        </Col>
                                    )
                                })
                            }
                        </Row>
                        <Row type={'flex'} justify={'center'}>
                            <Col xs={{span:24}} md={{span:4}} >
                                <Button type="primary" size={"large"} block><Link to={'/resume'}><i className="fa fa-send-o"></i>&nbsp;&nbsp;&nbsp;&nbsp;{this.state.btnName}</Link></Button>
                            </Col>
                        </Row>
                    </Col>
                </Row>
            </Fragment>
        )
    }
}

export default AboutCom
